<template>
    <div class="an-map-main" id="container">

    </div>
</template>

<script>
    import MapLoader from '@/assets/js/AMap.js'
    import { VueSelectAllSign } from '@/api/wxqiandao.js'
    import { isEmptyValue } from '@/utils/validate'
    export default {
        name: "sign-map",
      data () {
        return {
          map: null,
          pageData:{
            page:1,
            pageSize:50
          }
        }
      },
      mounted () {
        this.mapLoad()
      },
      methods: {
        mapLoad(){
          let _this = this
          MapLoader().then(AMap => {
            _this.map = new AMap.Map('container')
            _this.anLoad()
          }, e => {
            console.log('地图加载失败' ,e)
          })
        },
        anLoad(){
          VueSelectAllSign(this.pageData).then(res=>{
            let nd = res.data.list
            let anArray = []
            if(isEmptyValue(nd)){return}

            try {
              nd.forEach(item => {
                if(item['MAX(longitude)']){

                  // 创建 AMap.Icon 实例：
                  let icon = new AMap.Icon({
                    image: item.avatarurl,  // Icon的图像
                    imageSize: new AMap.Size(40, 40)   // 根据所设置的大小拉伸或压缩图片
                  });

                  let marker = new AMap.Marker({
                    position: new AMap.LngLat(item['MAX(longitude)'], item['MAX(latitude)']),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: item.nickname,
                    icon: icon
                  });
                  anArray.push(marker)
                }
              })
            }catch (e){console.log(e)}

            // 将创建的点标记添加到已有的地图实例：
            this.map.add(anArray);
            // 自动适配到合适视野范围
            // 无参数，默认包括所有覆盖物的情况
            this.map.setFitView();
          })
        },

      }
    }
</script>

<style lang="scss" scoped>
.an-map-main{
  position: absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;
}
</style>
